import React from "react";
import { Menu, SubMenu, MenuItem, Icon } from "bigbear-ui";
import useGetWidth from "@/components/hooks/useGetWidth";
import { useDispatch } from "react-redux";
import actions from "@/store/actions/home";

function HomeHeader() {
	const width = useGetWidth();
	const dispatch = useDispatch();
	const handleSelect = (
		index: string,
		current: string | undefined,
		setState: React.Dispatch<React.SetStateAction<string | undefined>>
	) => {
		if (index === current) {
			setState("-1");
			dispatch(actions.setCurrentCategory("all"));
			dispatch(actions.refreshLessons());
		} else {
			setState(index);
			switch (index) {
				case "0-0":
					dispatch(actions.setCurrentCategory("react"));
					dispatch(actions.refreshLessons());
					break;
				case "0-1":
					dispatch(actions.setCurrentCategory("vue"));
					dispatch(actions.refreshLessons());
					break;
				default:
					break;
			}
		}
	};

	return (
		<div className="home-homeheader" style={{ width }}>
			<div className="bigbear-layout-block-default">
				<span className="home-text">BIGBEAR-UI </span>
			</div>
			<Menu style={{ justifyContent: "flex-end", flex: "1" }} customHandle={handleSelect}>
				<SubMenu
					className={"subm"}
					style={{ display: "flex" }}
					icon={false}
					title={<Icon icon="align-justify"></Icon>}
				>
					<MenuItem>react</MenuItem>
					<MenuItem>vue</MenuItem>
				</SubMenu>
			</Menu>
		</div>
	);
}

export default HomeHeader;
